<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <script src="../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" style="box-shadow: none;">
        <div class="indexbox" style="background-color: #F6F6F6;">
            
            <!-- 整体数据统计 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="index_count color_1">
                        <p id="totalPerson"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>客户数
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="index_count color_2">
                        <p id="totalOrder"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>订单数
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="index_count color_3">
                        <p id="totalProduct"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>商品数
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="index_count color_4">
                        <p id="totalMoney"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>总金额
                    </div>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 堂食统计 -->
                    <div class="box">
                        <div class="box-title"><h2>堂食</h2></div>
                        <div class="box-content">
                            <ul class="incount_list">
                                <li><p id="todayPerson1"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>今日客户数</li>
                                <li><p id="todayOrder1"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>今日订单数</li>
                                <li><p id="todayMoney1"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>Total</li>
                            </ul>
                        </div>
                    </div><!-- 堂食统计 end -->
                </el-col>
                <el-col :span="12">
                    <!-- 外卖统计 -->
                    <div class="box">
                        <div class="box-title"><h2>外卖</h2></div>
                        <div class="box-content">
                            <ul class="incount_list">
                                <li><p id="todayPerson2"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>今日客户数</li>
                                <li><p id="todayOrder2"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>今日订单数</li>
                                <li><p id="todayMoney2"><img src="../static/img/loading.gif" th:src="@{/img/loading.gif}"></img></p>Total</li>
                            </ul>
                        </div>
                    </div><!-- 外卖统计 end -->
                </el-col>
            </el-row>


            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 订单分析 -->
                    <div class="box">
                        <div class="box-content no-padding">
                            <div class="index_chart_box">
                                <h2>订单分析</h2>
                                <div id="chart" class="index_chart"></div>
                            </div>
                        </div>
                    </div><!-- 订单分析 end -->
                </el-col>
                <el-col :span="12">
                    <!-- 客户分析 -->
                    <div class="box">
                        <div class="box-content no-padding">
                            <div class="index_chart_box">
                                <h2>客户分析</h2>
                                <div id="chart2" class="index_chart"></div>
                            </div>
                        </div>
                    </div><!-- 客户分析 end -->
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</body>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        mounted: function () {
            this.initTotalData();
            this.initTodayData();
            this.drawLine();  //echart
        },
        methods: {
        	initTotalData: function () {
                $.ajax({
                    url: "/vendor/homepage/totaldata",
                    type: "POST",
                    data: {},
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            $("#totalPerson").html(data.returnMessage.totalInfo.people);
                            $("#totalOrder").html(data.returnMessage.totalInfo.quantity);
                            $("#totalProduct").html(data.returnMessage.productNum);
                            $("#totalMoney").html(data.returnMessage.totalInfo.income);
                        }
                    }
                });
        	},
        	initTodayData: function () {
                $.ajax({
                    url: "/vendor/homepage/todaydata",
                    type: "POST",
                    data: {},
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            $("#todayPerson1").html(data.returnMessage.tsPersonNum);
                            $("#todayOrder1").html(data.returnMessage.tsOrderCount);
                            $("#todayMoney1").html(data.returnMessage.totalTsAmt);
                            $("#todayPerson2").html(data.returnMessage.wmPersonNum);
                            $("#todayOrder2").html(data.returnMessage.wmOrderCount);
                            $("#todayMoney2").html(data.returnMessage.totalWmAmt);
                        }
                    }
                });
        	},
            drawLine: function () {
                $.ajax({
                    url: "/vendor/homepage/historydata",
                    type: "POST",
                    data: {},
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                        	
                        	 var showDate = data.returnMessage.showDate;
                             var showAmt = data.returnMessage.showAmt;
                             var showDate2 = data.returnMessage.showDate2;
                             var showCount = data.returnMessage.showCount;
                             var orderCount = data.returnMessage.orderCount;
                             
                        	 // 订单分析图表数据配置
                            var myChart = echarts.init(document.getElementById('chart')),
                                option = {
                                    legend: {
                                        bottom : '0',
                                        left: 'center',
                                        textStyle: {
                                            color: '#222',
                                            fontSize: "14"
                                        },
                                        data: ['订单金额', '订单数']
                                    },
                                    xAxis: [
                                        {
                                            boundaryGap: false,
                                            axisLabel: {
                                                margin: '15'
                                            },
                                            axisLine: {
                                                lineStyle: {
                                                    color: '#8CA0B3',
                                                    width: 1
                                                }
                                            },
                                            data: showDate
                                        }
                                    ],
                                    tooltip: {
                                        textStyle: {
                                            fontSize: "14",
                                        },
                                        padding: 14,
                                        trigger: 'axis',
                                        formatter: function (datas) {
                                            var date = new Date;
                                            var year = date.getFullYear();
                                            var res = year + '/' + datas[0].name + '<br/>',
                                                val;
                                            for (var i = 0,
                                                     length = datas.length; i < length; i++) {
                                                val = (datas[i].value);
                                                res += datas[i].seriesName + '：' + val + '<br/>';
                                            }
                                            return res;
                                        }
                                    },
                                    yAxis: [
                                        {
                                            type: 'value',
                                            name: '订单金额',
                                            nameTextStyle: {
                                                color: '#222',
                                                fontSize: "14"
                                            },
                                            nameGap: 25,
                                            position: 'left',
                                            axisLine: {
                                                lineStyle: {
                                                    color: '#8CA0B3'
                                                }
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#697B8C'
                                                }
                                            },
                                            splitLine: {
                                                lineStyle: {
                                                    color: ['#eee']
                                                }
                                            }
                                        },
                                        {
                                            type: 'value',
                                            name: '订单数',
                                            nameTextStyle: {
                                                color: '#222',
                                                fontSize: "14"
                                            },
                                            nameGap: 25,
                                            position: 'right',
                                            axisLine: {
                                                lineStyle: {
                                                    color: '#8CA0B3'
                                                }
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#697B8C'
                                                }
                                            },
                                            splitLine: {
                                                lineStyle: {
                                                    color: ['#eee']
                                                }
                                            }
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '订单金额',
                                            type: 'line',
                                            smooth: true,
                                            textStyle: {
                                                color: '#222',
                                                fontSize: "14"
                                            },
                                            itemStyle: {
                                                normal: {
                                                    color: '#3366CC'
                                                }
                                            },
                                            data: showAmt,
                                            // markPoint: {
                                            //     data: [
                                            //         {type: 'max', name: '最大值'},
                                            //         {type: 'min', name: '最小值'}
                                            //     ]
                                            // },
                                            // markLine: {
                                            //     data: [
                                            //         {type: 'average', name: '平均值'}
                                            //     ]
                                            // }
                                        },
                                        {
                                            name: '订单数',
                                            type: 'line',
                                            yAxisIndex: 1,
                                            smooth: true,
                                            itemStyle: {
                                                normal: {
                                                    color: '#222'
                                                }
                                            },
                                            data: orderCount
                                        },
                                    ]
                                };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option, true);

                            // 客户分析图表数据配置
                            var myChart2 = echarts.init(document.getElementById('chart2')),
                                option2 = {
                                    legend: {
                                        bottom : '0',
                                        left: 'center',
                                        textStyle: {
                                            color: '#222',
                                            fontSize: "14"
                                        },
                                        data: ['新客户']
                                    },
                                    xAxis: [
                                        {
                                            axisLine: {
                                                lineStyle: {
                                                    color: '#8CA0B3',
                                                    width: 1
                                                }
                                            },
                                            data: showDate2
                                        }
                                    ],
                                    tooltip: {
                                        textStyle: {
                                            fontSize: "14",
                                        },
                                        padding: 14,
                                        trigger: 'axis',
                                        formatter: function (datas) {
                                            var date = new Date;
                                            var year = date.getFullYear();
                                            var res = year + '年' + datas[0].name + '<br/>',
                                                val;
                                            for (var i = 0,
                                                     length = datas.length; i < length; i++) {
                                                val = (datas[i].value);
                                                res += datas[i].seriesName + '：' + val + '<br/>';
                                            }
                                            return res;
                                        }
                                    },
                                    yAxis: [
                                        {
                                            type: 'value',
                                            name: '客户',
                                            nameTextStyle: {
                                                color: '#222',
                                                fontSize: "14"
                                            },
                                            nameGap: 25,
                                            position: 'left',
                                            axisLine: {
                                                lineStyle: {
                                                    color: '#8CA0B3'
                                                }
                                            },
                                            axisLabel: {
                                                textStyle: {
                                                    color: '#697B8C'
                                                }
                                            },
                                            splitLine: {
                                                lineStyle: {
                                                    color: ['#eee']
                                                }
                                            }
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '客户',
                                            type: 'line',
                                            smooth: true,
                                            textStyle: {
                                                color: '#222',
                                                fontSize: "14"
                                            },
                                            itemStyle: {
                                                normal: {
                                                    color: '#ffbf05'
                                                }
                                            },
                                            data: showCount
                                        },
                                    ]
                                };
                            // 使用刚指定的配置项和数据显示图表。
                            myChart2.setOption(option2, true);
                        }
                    }
                });
               
            }
        }
    });
</script>
</html>